
/*================== Flex ==================*/

.flex {
  display: flex;
}

/* 禁止压缩 */
.flex_shrink{ flex-shrink: 0; }

/* 设置 Flex 容器的方向为行（水平布局） */
.flex_row {
  flex-direction: row;
}

/* 设置 Flex 容器的方向为列（垂直布局） */
.flex_column {
  flex-direction: column;
}

/* 在 Flex 容器中将子元素在主轴和交叉轴上都居中对齐 */
.flex_center {
  justify-content: center;
  align-items: center;
}

/* 整体网格	控制整个网格在容器内的水平对齐  */
.justify_center {
  justify-content: center;
}

/* 所有子元素 水平居中 */
.justify_items_center{
	justify-items: center; 
}
 
/* 垂直居中 */
.align_center {
  align-items: center;
}

/* 水平顶部对齐 */
.align_start {
  align-items: flex-start;
}

/* 垂直底部对齐 */
.align_end {
  align-items: flex-end;
}
/* 水平右对齐 */
.flex_end {
  justify-content: flex-end;
}

/* 在 Flex 容器中将子元素在主轴上均匀分布，首尾元素与容器边缘无额外间距 */
.flex_between {
  justify-content: space-between;
}

/* 在 Flex 容器中将子元素在主轴上均匀分布，首尾元素与容器边缘有相等的间距 */
.flex_around {
  justify-content: space-around;
}

/* 在 Flex 容器中将子元素在主轴上均匀分布，所有元素之间的间距相等 */
.flex_evenly {
  justify-content: space-evenly;
}

/* 允许 Flex 容器内的子元素换行显示 */
.flex_wrap {
  flex-wrap: wrap;
}

/* 设置 Flex 容器内该元素的伸展比例为 1，即占据剩余空间 */
.flex_grow {
  flex-grow: 1;
}

/* 设置 Flex 容器内该元素的伸展、收缩比例为 1，基础大小为 0 */
.flex_1 {
  flex: 1;
}			
/*================== End Flex  ==================*/


/*================== grid ==================*/

.grid{
	display: grid;
}

/*================== End grid  ==================*/


/*================== border ==================*/

/*  改变元素宽度和高度的计算方式  */ 
.border_box{ box-sizing: border-box; }

/* 红色边框 */
.b_red { border: 1rpx solid red; }

/* 绿色边框 */
.b_green { border: 1rpx solid green; }

/*================== End border  ==================*/

/*================== margin  ==================*/

/* mx */
.mx_1{ margin-left: 10rpx;margin-right: 10rpx; }
.mx_2{ margin-left: 20rpx;margin-right: 20rpx; }
.mx_3{ margin-left: 30rpx;margin-right: 30rpx; }
.mx_4{ margin-left: 40rpx;margin-right: 40rpx; }
.mx_5{ margin-left: 50rpx;margin-right: 50rpx; }
.mx_6{ margin-left: 60rpx;margin-right: 60rpx; }
.mx_7{ margin-left: 70rpx;margin-right: 70rpx; }

/* my */
.my_1{ margin-top: 10rpx;margin-bottom: 10rpx; }
.my_2{ margin-top: 20rpx;margin-bottom: 20rpx; }
.my_3{ margin-top: 30rpx;margin-bottom: 30rpx; }
.my_4{ margin-top: 40rpx;margin-bottom: 40rpx; }
.my_5{ margin-top: 50rpx;margin-bottom: 50rpx; }
.my_6{ margin-top: 60rpx;margin-bottom: 60rpx; }
.my_7{ margin-top: 70rpx;margin-bottom: 70rpx; }

/* mt */
.mt_1{ margin-top: 10rpx; }
.mt_2{ margin-top: 20rpx; }
.mt_3{ margin-top: 30rpx; }
.mt_4{ margin-top: 40rpx; }
.mt_5{ margin-top: 50rpx; }
.mt_6{ margin-top: 60rpx; }
.mt_7{ margin-top: 70rpx; }

/* mb */
.mb_1{ margin-bottom: 10rpx; }
.mb_2{ margin-bottom: 20rpx; }
.mb_3{ margin-bottom: 30rpx; }
.mb_4{ margin-bottom: 40rpx; }
.mb_5{ margin-bottom: 50rpx; }
.mb_6{ margin-bottom: 60rpx; }
.mb_7{ margin-bottom: 70rpx; }


/*================== End margin   ==================*/


/*================== padding  ==================*/

/* px */
.px_1{ padding-left: 10rpx;padding-right: 10rpx; }
.px_2{ padding-left: 20rpx;padding-right: 20rpx; }
.px_3{ padding-left: 30rpx;padding-right: 30rpx; }
.px_4{ padding-left: 40rpx;padding-right: 40rpx; }
.px_5{ padding-left: 50rpx;padding-right: 50rpx; }
.px_6{ padding-left: 60rpx;padding-right: 60rpx; }
.px_7{ padding-left: 70rpx;padding-right: 70rpx; }

/* py */
.py_1{ padding-top: 10rpx;padding-bottom: 10rpx; }
.py_2{ padding-top: 20rpx;padding-bottom: 20rpx; }
.py_3{ padding-top: 30rpx;padding-bottom: 30rpx; }
.py_4{ padding-top: 40rpx;padding-bottom: 40rpx; }
.py_5{ padding-top: 50rpx;padding-bottom: 50rpx; }
.py_6{ padding-top: 60rpx;padding-bottom: 60rpx; }
.py_7{ padding-top: 70rpx;padding-bottom: 70rpx; }

/* pt */
.pt_1{ padding-top: 10rpx; }
.pt_2{ padding-top: 20rpx; }
.pt_3{ padding-top: 30rpx; }
.pt_4{ padding-top: 40rpx; }
.pt_5{ padding-top: 50rpx; }
.pt_6{ padding-top: 60rpx; }
.pt_7{ padding-top: 70rpx; }

/* pb */
.pb_1{ padding-bottom: 10rpx; }
.pb_2{ padding-bottom: 20rpx; }
.pb_3{ padding-bottom: 30rpx; }
.pb_4{ padding-bottom: 40rpx; }
.pb_5{ padding-bottom: 50rpx; }
.pb_6{ padding-bottom: 60rpx; }
.pb_7{ padding-bottom: 70rpx; }


/*================== End padding   ==================*/


/*================== 圆角 ==================*/

.br_5{ border-radius: 50rpx; }
.br_100{ border-radius: 100%; }

/*================== End 圆角  ==================*/

/*================== 常见的字体大小设置 ==================*/

.title {
  font-size: 32rpx; /* 标题 */
}

.sub_title {
  font-size: 28rpx; /* 副标题 */
}

.body_size {
  font-size: 24rpx; /* 正文 */
}

.caption {
  font-size: 20rpx; /* 辅助文字 */
}

.small {
  font-size: 16rpx; /* 小字 */
}

.bold_500{
	font-weight: 500;
}

/* 固定粗细 - 始终为700粗细 */
.bold_text {
  font-weight: bold;
}

/* 相对粗细 - 比父元素更粗 */
.bolder_text {
  font-weight: bolder;
}

/*================== End 常见的字体大小设置  ==================*/



